import React from 'react'
import { View, Text, Button, TouchableHighlight, TouchableOpacity, TouchableWithoutFeedback } from 'react-native'

export default function Index() {
  const handlePress = () => {
    console.log(0)
  }

  return (
    <>
      <View>
        <Button
          title="click"
          color="purple"
          onPress={handlePress}
        ></Button>
      </View>
      <TouchableHighlight
        onPress={handlePress}
        underlayColor="#fff"
        activeOpacity={0.5}
        style={{
          borderRadius: 5
        }}
      >
        <View
          style={{
            width: 150,
            height: 40,
            backgroundColor: '#6435c9',
            borderRadius: 5
          }}
        >
          <Text
            style={{
              color: '#fff',
              textAlign: 'center',
              lineHeight: 40
            }}
          >
            按钮
          </Text>
        </View>
      </TouchableHighlight>

      <TouchableOpacity
        onPress={handlePress}
        underlayColor="#fff"
        activeOpacity={0.8}
        style={{
          borderRadius: 5,
          marginTop: 10
        }}
      >
        <View
          style={{
            width: 150,
            height: 40,
            backgroundColor: '#f9efd4',
            borderRadius: 5,
          }}
        >
          <Text
            style={{
              textAlign: 'center',
              lineHeight: 40
            }}
          >
            按钮
          </Text>
        </View>
      </TouchableOpacity>

      <TouchableWithoutFeedback
        onPress={handlePress}
        underlayColor="#fff"
        activeOpacity={0.8}
      >
        <View
          style={{
            width: 150,
            height: 40,
            backgroundColor: 'tomato',
            borderRadius: 5,
            marginTop: 10
          }}
        >
          <Text
            style={{
              textAlign: 'center',
              lineHeight: 40
            }}
          >
            按钮
          </Text>
        </View>
      </TouchableWithoutFeedback>
    </>
  )
}
